<template>
  <div id="add">
    <el-card shadow="hover" style="width: 50%; margin: 0 auto;">
      <div slot="header" class="clearfix">
        <span>添加管理员</span>
      </div>
      <el-form :model="form" label-width="100px">
        <el-form-item label="管理员账号">
          <el-input v-model="form.username" class="itemType"></el-input>
        </el-form-item>
        <el-form-item label="管理员密码">
          <el-input v-model="form.password" class="itemType"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" >添加</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {addAdmin} from "@/network/index.js";


export default {
  name: 'Add',
  data(){
    return {
      form:{
        username:"",
        password:""
      }
    }
  },
  methods:{
    open(message,type){
      this.$message({
        message,
        type
      })
    },
    onSubmit(){
      if(this.form.username != "" && this.form.password!=null){
        //发送请求
        let token = this.$store.getters.getToken;
        addAdmin(token,this.form.username,this.form.password)
        .then((res) => {
          if(res.data.code >=200 && res.data.code < 300){
            this.open('添加成功','success');
            this.form.username = "";
            this.form.password = "";
          }else throw new Error(res.data.msg);
        }).catch((err) => {
          console.log(err);
        });
      }else this.open('请填用户名密码','warning');
    }
  }
}
</script>

<style scoped>
.itemType{
  width: 200px;
}
</style>
